<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="./js/echarts/echarts.5.0.0.js"></script>
    <script src="./js/echarts/theme/shine.js"></script>
    <title>ECharts进度案例</title>
</head>
<style>
    #chart-1 {
        width: 800px;
        height: 100px;
        display: inline-block;
    }
</style>
<body>
<div id="chart-1"></div>
</body>
<script>
    echarts.init(document.getElementById("chart-1"), "shine", {renderer: "svg"}).setOption({
        title: {
            text: 'ECharts进度案例'
        },
        xAxis: {
            show: false
        },
        yAxis: {
            type: 'category', // 横排
            show: false,
        },
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
        },
        series: [
            {
                stack: '总量', // 名字一样会合并成一条线
                type: 'bar',
                data: [80],
                barWidth: 10,
                itemStyle: {
                    color: '#45c946'
                }
            },
            {
                stack: '总量',
                type: 'bar',
                barWidth: 10,
                data: [100],
                itemStyle: {
                    color: '#eee'
                }
            },
            {
                type: 'custom', // 自定义
                stack: '总量',
                data: [80], // 位置
                renderItem: (params, api) => {
                    const value = api.value(0) // 获取位置
                    const endPoint = api.coord([value, 0]) // 获取坐标点
                    return {
                        type: 'group',
                        position: endPoint, // 坐标点
                        children: [{
                            type: 'path', // svg
                            shape: {
                                d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z', // svg d 图标代码
                                x: -5, // 偏移
                                y: -20,
                                width: 10, // 大小
                                height: 10,
                                layout: 'cover' // 比例缩放
                            },
                            style: {
                                fill: '#45c946'
                            }
                        }, {
                            type: 'path',
                            shape: {
                                d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                                x: -5,
                                y: 10,
                                width: 10,
                                height: 10,
                                layout: 'cover'
                            },
                            style: {
                                fill: '#45c946'
                            }
                        }]
                    }
                }
            }
        ]
    })

</script>
</html>
